<template>
  <div class="main">
    <div class="outDiv">
      <go-back aa="../user" :white="true" topTitle="关注专家" :hasTitle="true"></go-back>
      <div>
        <scroller
          ref="scrollerBottom"
          style="top: 0.88rem;"
          :on-refresh="refresh"
          :on-infinite="infinite"
          :noDataText="noDataText"
          class="my-scroller"
        >
          <svg class="spinner" style="stroke:@mainColor;" slot="refresh-spinner" viewBox="0 0 64 64">
            <g stroke-width="7" stroke-linecap="round">
              <line x1="10" x2="10" y1="27.3836" y2="36.4931">
                <animate
                  attributeName="y1"
                  dur="750ms"
                  values="16;18;28;18;16;16"
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="y2"
                  dur="750ms"
                  values="48;46;36;44;48;48"
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="stroke-opacity"
                  dur="750ms"
                  values="1;.4;.5;.8;1;1"
                  repeatCount="indefinite"
                />
              </line>
              <line x1="24" x2="24" y1="18.6164" y2="45.3836">
                <animate
                  attributeName="y1"
                  dur="750ms"
                  values="16;16;18;28;18;16"
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="y2"
                  dur="750ms"
                  values="48;48;46;36;44;48"
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="stroke-opacity"
                  dur="750ms"
                  values="1;1;.4;.5;.8;1"
                  repeatCount="indefinite"
                />
              </line>
              <line x1="38" x2="38" y1="16.1233" y2="47.8767">
                <animate
                  attributeName="y1"
                  dur="750ms"
                  values="18;16;16;18;28;18"
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="y2"
                  dur="750ms"
                  values="44;48;48;46;36;44"
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="stroke-opacity"
                  dur="750ms"
                  values=".8;1;1;.4;.5;.8"
                  repeatCount="indefinite"
                />
              </line>
              <line x1="52" x2="52" y1="16" y2="48">
                <animate
                  attributeName="y1"
                  dur="750ms"
                  values="28;18;16;16;18;28"
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="y2"
                  dur="750ms"
                  values="36;44;48;48;46;36"
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="stroke-opacity"
                  dur="750ms"
                  values=".5;.8;1;1;.4;.5"
                  repeatCount="indefinite"
                />
              </line>
            </g>
          </svg>
          <div class="specialistBox">
            <ul class="specialist_list">
              <li class="specialist_item" v-for="(item, index) of specialist" :key="index">
                <div class="personMsg">
                  <div class="image">
                    <img :src="item.avatar" />
                  </div>
                  <div class="oppositeMsg">
                    <div class="name">{{ item.name }}</div>
                    <div class="work">{{ item.agencyName }} · {{ item.title }}</div>
                    <div class="msg">
                      <span>粉丝&nbsp;{{ item.fansCount }}</span>
                      <span>回答&nbsp;{{ item.answerCount }}</span>
                      <span>文章&nbsp;{{ item.articleCount }}</span>
                    </div>
                  </div>
                </div>
                <div
                  :class="['btn', item.followStatus == 0 ? 'noAttentionBtn' : 'attentionBtn']"
                  @click="getAttention(item)"
                >{{ item.followStatus == 0 ? '+ 关注' : '已关注'}}</div>
              </li>
            </ul>
             <div v-show="showBlank">
              <div class="noDataImage">
                <img src="~@/static/nothing/empty_attention.png" alt />
                <div class="describe">您还没有关注任何信息</div>
              </div>
              </div>
            <div style="width: 100%; height: 0.5rem;"></div>
          </div>
        </scroller>
      </div>
      <!-- <div v-else>
        <div class="noDataImage">
          <img src="~/static/nothing/empty_attention.png" alt />
          <div class="describe">您还没有关注任何信息</div>
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
import goBack from "~/components/goBack";
import { followProfessorList, agencyfollowUser } from "~/api/identity";
export default {
  components: {
    goBack
  },
  data() {
    return {
      showBlank:false,
      listData: [],
      specialist: [],
      pagination: {
        pageNo: 1,
        pageSize: 4
      },
      currentPage: 1,
      onFetching: true,
      noData: true,
      noDataText:""
    };
  },
  mounted() {
    this.getSpecialists();
    this.$visit("FollowExpert")
  },
  methods: {
    getSpecialists() {
      this.$loading('open');
      let obj = {
        pageNo: 1,
        pageSize: 10
      };
      followProfessorList(obj)
        .then(res => {
          if (res.code == 0) {
            this.specialist = res.data.professorList;
            this.totalLength = res.data.professorList.length;
            this.noDataText = "没有更多关注了"
            if(this.totalLength===0){
                this.showBlank=true
                this.noDataText = ""
            }
            his.$vux.loading.hide();
          }
        })
        .catch(error => {
          this.$hideLoading();
        });
    },
    refresh(done) {
      setTimeout(() => {
        this.$loading('open');
        this.currentPage=1
        let obj = {
          pageNo: this.currentPage,
          pageSize: 10
        };
        followProfessorList(obj)
          .then(res => {
            if (res.code == 0) {
              this.specialist = res.data.professorList;
              this.totalLength = res.data.professorList.length;
              his.$vux.loading.hide();
            }
          })
          .catch(error => {
            this.$hideLoading();
          });
        done();
      }, 500);
    },
    infinite(done) {
      if (this.totalLength > 0) {
        this.currentPage = this.currentPage + 1;
        followProfessorList({
          pageNo: this.currentPage,
          pageSize: 10
        }).then(res => {
          if (res.code == "0") {
            let newArr = res.data.professorList;
            this.specialist = this.specialist.concat(newArr);
            this.totalLength = res.data.professorList.length;
            done();
          }
        });
      } else {
        done(true);
        return;
      }
    },

    // 关注与取消关注
    getAttention(item) {
      // this.$loading('open');
      let statusAction = 0; // 1:关注   0:取消关注
      if (item.followStatus == 0) {
        item.followStatus = 1; // 已关注
        statusAction = 1;
      } else {
        item.followStatus = 0; // 未关注
        statusAction = 0;
      }
      agencyfollowUser({
        action: statusAction,
        toUserId: item.id
      })
        .then(() => {
          // this.$hideLoading();
        })
        .catch(error => {
          this.$vux.toast.text("网络故障，请稍后重试~");
          // this.$hideLoading();
        });
    }
  }
};
</script>

<style lang="less" scoped>
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;

  .specialistBox {
    padding: 0 0.32rem;

    .specialist_list {
      list-style: none;
      padding-left: 0;

      .specialist_item {
        width: 100%;
        height: 1.91rem;
        padding-top: 0.32rem;
        border-bottom: 1px solid #e5e8ed;
        display: flex;
        justify-content: space-between;

        .personMsg {
          display: flex;
          justify-content: flex-start;

          .image {
            width: 1rem;
            height: 1rem;
            margin-right: 0.24rem;

            img {
              border-radius: 50%;
              width: 100%;
              height: 100%;
            }
          }

          .oppositeMsg {
            .name {
              color: #222;
              font-size: 0.3rem;
              line-height: 0.26rem;
              font-weight: bold;
              margin-bottom: 0.14rem;
            }

            .work {
              color: #222;
              font-size: 0.26rem;
              // line-height: 0.26rem;
              // margin-bottom: 0.24rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              -webkit-box-orient: vertical;
            }

            .msg {
              color: #999;
              font-size: 0.26rem;
              line-height: 0.26rem;

              span {
                margin-right: 0.24rem;
              }

              span:last-child {
                margin-right: 0;
              }
            }
          }
        }

        .btn {
          width: 1.26rem;
          height: 0.58rem;
          line-height: 0.58rem;
          border-radius: 0.29rem;
          font-size: 0.26rem;
          text-align: center;
          margin-top: 0.34rem;
          box-sizing: border-box;
        }

        .attentionBtn {
          background: #f7f7fa;
          border: 1px solid transparent;
          color: #c7c7c7;
        }

        .noAttentionBtn {
          color: @mainColor;
          border: 1px solid @mainColor;
          background: #fff;
        }
      }
    }
  }

  .noDataImage {
    text-align: center;
    padding-top: 2.4rem;
    img {
      width: 2.4rem;
      height: 2.4rem;
      margin-bottom: 0.24rem;
    }
    .describe {
      color: #999;
      font-size: 0.28rem;
      line-height: 0.4rem;
    }
  }
}
</style>
